<?php include('header.php');?>
<script type="text/javascript" src="../jquery/js/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="../jquery/css/jquery.autocomplete.css"/>
<?php
$Query = mysql_query("SELECT reservation_detail_fname,reservation_detail_lname FROM reservation_detail GROUP BY reservation_detail_fname,reservation_detail_lname");
	while($row = mysql_fetch_array($Query)){
		$line1[]=array($row["reservation_detail_fname"]." ".$row["reservation_detail_lname"]);
	}
?>
<script type="text/javascript">
                    $(function(){
                        var dateBefore=null;
                        $("#dateInput").datepicker({
                            dateFormat: 'dd-mm-yy',
                            dayNamesMin: ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'],
                            monthNamesShort: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
                            changeMonth: true,
                            minDate: 0,
                            changeYear: true ,
                            beforeShow:function(){
                                if($(this).val()!=""){
                                    var arrayDate=$(this).val().split("-");
                                    arrayDate[2]=parseInt(arrayDate[2])-543;
                                    $(this).val(arrayDate[0]+"-"+arrayDate[1]+"-"+arrayDate[2]);
                                }
                                setTimeout(function(){
                                    $.each($(".ui-datepicker-year option"),function(j,k){
                                        var textYear=parseInt($(".ui-datepicker-year option").eq(j).val())+543;
                                        $(".ui-datepicker-year option").eq(j).text(textYear);
                                    });
                                },50);

                            },
                            onChangeMonthYear: function(){
                                setTimeout(function(){
                                    $.each($(".ui-datepicker-year option"),function(j,k){
                                        var textYear=parseInt($(".ui-datepicker-year option").eq(j).val())+543;
                                        $(".ui-datepicker-year option").eq(j).text(textYear);
                                    });
                                },50);
                            },
                            onClose:function(){
                                if($(this).val()!="" && $(this).val()==dateBefore){
                                    var arrayDate=dateBefore.split("-");
                                    arrayDate[2]=parseInt(arrayDate[2])+543;
                                    $(this).val(arrayDate[0]+"-"+arrayDate[1]+"-"+arrayDate[2]);
                                }
                            },
                            onSelect: function(dateText, inst){
                                dateBefore=$(this).val();
                                var arrayDate=dateText.split("-");
                                arrayDate[2]=parseInt(arrayDate[2])+543;
                                $(this).val(arrayDate[0]+"-"+arrayDate[1]+"-"+arrayDate[2]);
                            }

                        });

                   var str_name = <?php echo json_encode($line1).';'; ?>
                   
            		$("#Name").autocomplete( str_name , {
            			mustMatch: false,
            			autoFill: false,
            			matchContains:true,
            			});
                    });

</script>
<script language="javascript">

function open_popup(){
	if(document.formreport.rtype1.checked == false && document.formreport.rtype2.checked == false){
		alert('กรุณาเลือกประเภทด้วยค่ะ');
		return false;
     }
	if(document.formreport.rtype1.checked == true && document.formreport.Name.value == ""){
		alert('กรุณากรอกชื่อด้วยค่ะ');
		document.formreport.Name.focus();
		return false;
	}
	if(document.formreport.rtype2.checked == true && document.formreport.dateInput.value == ""){
		alert('กรุณาเลือกวันที่ด้วยค่ะ');
		document.formreport.dateInput.focus();
		return false;
	}
		document.formreport.submit();
}
</script>
<body>
<div class="box">
  <div class="left"></div>
  <div class="right"></div>
    <div class="heading"><h1>ยกเลิกการจอง</h1>
</div>
  <div class="content">
<table class="list2" align="center" width="300" cellpadding="10">
        <thead>
          <tr>
            <td colspan="2" style="padding-left:10px;" class="heading3"><strong>กรุณาเลือก</strong></td>
          </tr>
        </thead>
        <tbody>
		<form action="room_cancle_show.php" name="formreport" method="post" id="formreport">
		  <tr>
            <td align="left" style="padding-left:20px;" width="50px"><label><input type="radio" name="rtype" id="rtype1" onclick="JavaScript:document.formreport.dateInput.value = '';" value="name" />ชื่อ</label></td>
            <td align="left" style="padding-left:10px;"><input name="Name" type="text" id="Name" value="" onclick="JavaScript:document.formreport.rtype[0].checked=true; document.formreport.dateInput.value = '';" /></td>
          </tr>
          <tr>
            <td align="left" style="padding-left:20px;" width="50px"><label><input type="radio" name="rtype" id="rtype2" onclick="JavaScript:document.formreport.Name.value = '';" value="day" />วันที่ </label></td>
            <td align="left" style="padding-left:10px;"><input name="dateInput" type="text" id="dateInput" onclick="JavaScript:document.formreport.rtype[1].checked=true; document.formreport.Name.value = '';" /></td>
          </tr>
          <tr>
            <td colspan="2" align="center"><div class="buttons"><a onclick="open_popup();" class="button"><span>ค้นหา</span></a></div>           </td>
          </tr>
		  </form>
        </tbody>
      </table>
		</div>
</div>
</body>
<?php include('footer.php');?>
